<template>
  <div class='search-body'>
    <header class="ft14">
      <span v-for="(item, index) in orderData" :key="index" v-if="item.is_label" :class="{'color-blue':item.isActive}">{{item.label}}</span>
      <span v-else-if="item.is_order">
        {{item.label}}
        <span class="arrow-box fr">
          <i class="hover el-icon-arrow-up"></i>
          <i class="hover el-icon-arrow-down"></i>
        </span>
      </span>
      <span v-else-if="item.is_check&&item.show">
        <el-checkbox v-model="item.isActive">{{item.label}}</el-checkbox>
      </span>

      <span v-else-if="item.is_page" class="fr page-box">
        <i class="el-icon-arrow-left hover" title="上一页" @click="prePage"></i>
        <span>{{pageInfo.page}}/{{pageInfo.pageTotal}}</span>
        <i class="el-icon-arrow-right hover" title="下一页" @click="nextPage"></i>
      </span>
    </header>
    <main>
      <Unit v-for="(item, index) in listData" :info="item" :showShopInfo="item.shopInfo" :key="index" />
    </main>

    <div class="page-info">
      <Page :pageInfo="pageInfo" @changePage="changePage" />
    </div>
  </div>
</template>
<script>
import Unit from '../common/unit.vue'
import Page from '@/components/page.vue'
export default {
  components: {Unit,Page},
  name: "",
  data() {
    return {
      orderData:[
        {label:"默认",is_label:true,isActive:true},
        {label:"价格",is_order:true,isActive:false},
        {label:"销量",is_order:true,isActive:false},
        {label:"更新时间",is_order:true,isActive:false},
        {label:"现货商家",is_check:true,isActive:false,show:false},
        {label:"自营",is_check:true,isActive:false,show:false},
        {is_page:true}
      ],
      pageInfo:{
        total:100,
        pageTotal:10,
        page:1
      },
      listData:[
        {
          img:"",
          money:"",//价格
          count:"",//销量
          intro:"简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介",//简介
          shopInfo:{      //是否存在店铺信息
            is_self:true, //是否自营
            name:"",      //店铺名
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },{
          shopInfo:{
            is_self:false,
            address:"湖北 武汉"
          }
        },
      ]
    };
  },
  methods: {
    /**
     * @name 执行搜索
     */
    doSearch(){
      console.log("搜搜");
    },

    /**
     * @name 上一页
     */
    prePage(){
      if(this.pageInfo.page>1){
        this.pageInfo.page--
        this.getNewList()
      }
    },

    /**
     * @name 下一页
     */
    nextPage(){
      if(this.pageInfo.page<this.pageInfo.pageTotal){
        this.pageInfo.page++
        this.getNewList()
      }
    },

    /**
     * @name 翻页
     */
    changePage(val){
      this.$set(this.pageInfo,"page",val)
      this.getNewList()
    },

    /**
     * @name 获取列表
     */
    getNewList(){
      console.log("获取新的列表");
    },

    init(){
      let path = _g.getRouterPath(this)
      this.orderData[4].show=path!=="/shops"
      this.orderData[5].show=path!=="/shops"
    },
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.search-body {
  header{
    margin: 10px 0;
    box-sizing: border-box;
    border: 1px solid #eee;
    height: 50px;

    >span{
      display: inline-block;
      margin: 10px 0;
      min-width: 40px;
      padding: 0 10px;
      text-align: center;
      line-height: 30px;
      border-left: 1px solid #eee;
      // box-sizing: inherit;
    }
    >span:nth-child(1){
      border: none;
    }
    .arrow-box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 5px;
      transform: translateY(2px);
      width: 20px;
    }
  }
  main{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    >div{
      margin: 0;
      padding: 15px;
      width: 228px;
      box-sizing: border-box;
      border: 1px solid #eee;
      // margin-right: 10px;
      margin-bottom: 10px;
    }
    >div:nth-child(4n+4){
      margin-right: 0;
    }
  }
  .page-info{
    text-align: center;
    margin: 20px 0;
  }
}
</style>